<template>
  <ContentWrap>
    <!-- 搜索表单 -->
    <el-form 
      class="-mb-15px"
      :inline="true" 
      :model="searchForm"
      ref="queryFormRef"
      label-width="68px"
    >
      <el-form-item prop="customerName">
        <el-input 
          v-model="searchForm.customerName" 
          placeholder="请输入客户名称" 
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item prop="orderStatus">
        <el-select 
          v-model="searchForm.orderStatus" 
          placeholder="请选择状态" 
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        >
          <el-option label="待计划" value="pending" />
          <el-option label="待开始" value="processing" />
          <el-option label="生产中" value="inProduction" />
          <el-option label="已完成" value="completed" />
          <el-option label="已作废" value="nullified" />
        </el-select>
      </el-form-item> 
      <el-form-item prop="workNumber">
        <el-input 
          v-model="searchForm.workNumber" 
          placeholder="请输入工单编号" 
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px" 
        />
      </el-form-item>
      <el-form-item prop="machine">
        <el-input 
          v-model="searchForm.machine" 
          placeholder="请输入机台" 
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item prop="productInfo">
        <el-input 
          v-model="searchForm.productInfo" 
          placeholder="请输入销售订单号" 
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item prop="orderNumber">
        <el-input 
          v-model="searchForm.orderNumber" 
          placeholder="请输入客户订单编号" 
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
        <el-button @click="handleReset"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 操作按钮区域 -->
  <el-row :gutter="10" style="margin-bottom: 16px">
    <el-col :span="12">
      <div class="operation-buttons">
        <el-button type="primary" plain @click="openForm()" :disabled="!selectedRows.length">
          任务开始
        </el-button>
      </div>
    </el-col>
      <el-col :span="12">
      <div class="status-container">
        <div class="status-item">
          <span class="color-block gray"></span>
          <span class="status-text">待开始</span>
        </div>
        <div class="status-item">
          <span class="color-block blue"></span>
          <span class="status-text">生产中</span>
        </div>
        <div class="status-item">
          <span class="color-block green"></span>
          <span class="status-text">已完成</span>
        </div>
        <div class="status-item">
          <span class="color-block red"></span>
          <span class="status-text">已逾期</span>
        </div>
      </div>
    </el-col>
  </el-row>

  <!-- 表格区域 -->
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    :stripe="true"
    :show-overflow-tooltip="true"
    @selection-change="handleSelectionChange"
    v-loading="loading"
  >
    <el-table-column type="selection" width="55" v-if="visibleColumns.selection" />
    <!-- <el-table-column label="序号" type="index" align="center" width="60" /> -->
     <el-table-column prop="orderStatus" label="状态" width="120" align="center" v-if="visibleColumns.orderstatus">
      <template #default="{row}">
        <el-tag :type="getStatusTagType(row.status)">
          {{ getStatusText(row.status) }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="workNumber" label="工单编号" width="150" align="center" v-if="visibleColumns.workNumber" />
    <el-table-column prop="productCode" label="产品编号" width="150" align="center" v-if="visibleColumns.productCode" />
    <el-table-column prop="productName" label="产品名称" width="150" align="center" v-if="visibleColumns.productName" />
    <el-table-column prop="specification" label="规格" width="120" align="center" v-if="visibleColumns.specification" />
    <el-table-column prop="customerName" label="客户名称" width="150" align="center" v-if="visibleColumns.customerName" />
    <el-table-column prop="quantity" label="订单数" width="100" align="center" v-if="visibleColumns.quantity" />
    <el-table-column prop="machine" label="机台" width="100" align="center" v-if="visibleColumns.machine" />
    <el-table-column prop="deliveryDate" label="客户交期" sortable width="150" align="center" v-if="visibleColumns.deliveryDate" />
    <el-table-column prop="productInfo" label="销售订单" width="100" align="center" v-if="visibleColumns.productInfo" />
    <el-table-column prop="orderNumber" label="客户订单编号" width="180" align="center" v-if="visibleColumns.orderNumber" />
    <el-table-column prop="planOrder" label="计划单号" width="100" align="center" v-if="visibleColumns.planOrder" />
    <el-table-column prop="orderName" label="工单名称" width="150" align="center" v-if="visibleColumns.orderName" />
    <el-table-column prop="startDate" label="开始日期" width="150" align="center" v-if="visibleColumns.startDate" />
    <el-table-column prop="endDate" label="完成日期" width="150" align="center" v-if="visibleColumns.endDate" />
  </el-table>

  <!-- 分页 -->
  <div class="pagination">
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  
  <ProductOrderForm ref='formRef' />
  
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import ProductOrderForm from '@/views/erp/product/plan/ProductOrderForm.vue'

// 搜索表单
const searchForm = reactive({
  orderNumber: '',
  productInfo: '',
  customerName: '',
  orderStatus: '',
  workNumber:'',
  machine:'',
})

const queryFormRef = ref()
const loading = ref(false)
const tableData = ref([])
const selectedRows = ref([])


// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const visibleColumns = ref({
  selection: true,
  orderstatus:true,
  workNumber:true,
  productCode: true,
  productName: true,
  specification: true,
  customerName: true,
  quantity: true,
  machine:true,
  deliveryDate:true,
  productInfo:true,
  orderNumber: true,
  planOrder:true,
  orderName:true,
  startDate: true,
  endDate: true,
})

// 模拟数据
const mockData = [
  {
    id: 'GX20160900001',
    workNumber: 'GX20160900001',
    orderName: '备料1',
    productName: '外壳组件',
    productCode: 'WH-001',
    specification: 'A型',
    customerName: '客户A',
    quantity: 100,
    status: 'completed',
    startDate: '2023-06-01',
    endDate: '2023-06-05',
    creator: '张三',
    createTime: '2023-05-30 10:00:00'
  },
  {
    id: 'GX20160900004',
    workNumber: 'GX20160900004',
    orderName: 'CNC1',
    productName: '金属框架',
    productCode: 'JK-002',
    specification: 'B型',
    customerName: '客户B',
    quantity: 50,
    status: 'processing',
    startDate: '2023-06-06',
    endDate: '',
    creator: '李四',
    createTime: '2023-06-01 14:30:00'
  },
  {
    id: 'GX20160900005',
    workNumber: 'GX20160900005',
    orderName: '收货',
    productName: '电子元件',
    productCode: 'DZ-003',
    specification: 'C型',
    customerName: '客户C',
    quantity: 200,
    status: 'inProduction',
    startDate: '',
    endDate: '',
    creator: '王五',
    createTime: '2023-06-05 09:15:00'
  }
]
// 初始化加载数据
onMounted(() => {
  fetchData()
})

// 获取数据
const fetchData = () => {
  loading.value = true
  // 模拟API请求
  setTimeout(() => {
    // 根据搜索条件过滤数据
    const filteredData = mockData.filter(item => {
      return (
        (searchForm.orderNumber === '' || item.workNumber.includes(searchForm.workNumber)) &&
        (searchForm.productInfo === '' || 
          item.productName.includes(searchForm.productInfo) || 
          item.productCode.includes(searchForm.productInfo)) &&
        (searchForm.customerName === '' || item.customerName.includes(searchForm.customerName)) &&
        (searchForm.orderStatus === '' || item.status === searchForm.orderStatus) 
      )
    })
    
    tableData.value = filteredData
    pagination.total = filteredData.length
    loading.value = false
  }, 500)
}

// 搜索
const handleQuery = () => {
  pagination.currentPage = 1
  fetchData()
}

// 重置搜索
const handleReset = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

// 表格选择
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 分页变化
const handleSizeChange = (val) => {
  pagination.pageSize = val
  fetchData()
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val
  fetchData()
}
const formRef = ref()
const openForm = () => {
  formRef.value.open()
}

// 状态标签类型
const getStatusTagType = (status) => {
  switch (status) {
    case 'completed': return 'success'
    case 'inProduction': return 'primary'
    case 'nullified': return 'warning'
    // case 'nullified': return 'danger'
    case 'processing': return 'info'
  }
}

// 状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'completed': return '已完成'
    case 'inProduction': return '生产中'
    case 'processing': return '待开始'
    case 'nullified':return '已逾期'
    default: return status
  }
}
</script>

<style scoped>
.order-management-container {
  padding: 20px;
}

.operation-buttons {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

.column-config-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.el-table {
  margin-top: 20px;
}

.status-container {
  justify-content: flex-end; /* 靠右 */
  display: flex;
  gap: 20px;

}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-block {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.gray {
  background-color: #cdcfd4;
}

.blue {
  background-color: #409EFF;
}

.green {
  background-color: #67C23A;
}

.red {
  background-color: #F56C6C;
}

.status-text {
  font-size: 14px;
  color: #606266;
}
</style>
